<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lesson 2</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    Vue.createApp({
      data() {
        return {
          content: "hello world",
        };
      },
      methods: {
        handleBtnClick() {
          this.content = this.content.split("").reverse().join("");
        },
      },
      template: `
      <div>
        {{content}}
        <button v-on:click="handleBtnClick">反转</button>
      </div>
    `,
    }).mount("#root");
    // Vue.createApp({
    //   data() {
    //     return { show: true };
    //   },
    //   methods: {
    //     handleBtnClick() {
    //       this.show = !this.show;
    //     },
    //   },
    //   template: `
    //   <div>
    //     <span v-if="show">hello world</span>
    //     <button v-on:click="handleBtnClick">显示/隐藏</button>
    //   </div>
    // `,
    // }).mount("#root");
  </script>
</html>
